<template>
	<view class="content">
		<view class="new-head">
			<AllHeads name="修改昵称"></AllHeads>
		</view>
		<input type="text" class="chg-input" @input="checkLength" v-model="username" />
		<text class="chg-tip">限4-24个中文、英文或数字组成</text>
		<text class="chg-btn" v-if="username.length < 4 || username.length > 24">确定修改</text>
		<text class="chg-btn1" v-else @click="editUsername">确定修改</text>
	</view>
</template>

<script>
	import {
		user
	} from '../../api/apia';
	export default {
		data() {
			return {
				username: '',
				type: 'arrow-left',
				show: false,
				up: false
			};
		},
		onLoad(val) {
			this.username = val.info
		},
		methods: {
			checkLength() {
				const regex = /^[\u4e00-\u9fa5a-zA-Z0-9]{4,24}$/;
			},
			editUsername() {
				uni.navigateTo({
					url: '/pages/supports/supports'
				})

				user({
					id: 15,
					avatar: '',
					username: this.username
				}).then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
	text {
		display: block;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding: 25rpx;

		.new-head {
			width: 100%;
			padding: 50rpx 0 30rpx 0;
		}

		.chg-input {
			width: 100%;
			border-bottom: 2rpx solid #f7f7f7;
			padding: 15rpx 0;
			font-size: 30rpx;
		}

		.chg-tip {
			color: #999;
			font-size: 25rpx;
			margin: 25rpx 0;
		}

		.chg-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #cccccc;
			color: #fff;
			text-align: center;
			font-size: 35rpx;
			letter-spacing: 3rpx;
			margin-top: 30rpx;
			border-radius: 10rpx;
		}

		.chg-btn1 {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #2295ff;
			color: #fff;
			text-align: center;
			font-size: 35rpx;
			letter-spacing: 3rpx;
			margin-top: 30rpx;
			border-radius: 10rpx;
		}
	}
</style>